<!DOCTYPE html>
<html lang="en">
<body>
    <div>
        <span id="before"><</span>
        <span id="date"></span>
        <span id="next">></span>
    </div>
    <script>
        var before = document.querySelector("#before"),
            date = document.querySelector("#date"),
            next = document.querySelector("#next"),
            //前后执行了多少步,向前就加一，向后就减一
            n = 0,
            dateValue = new Date(),
            //一天的毫秒数
            perDeviation = 24*60*60*1000;
            render();
            before.addEventListener("click",function(){
                n--;
                render();
            });
            next.addEventListener("click",function(){
                n++;
                render();
            });
            function render(){
                before.disabled = n===30;
                next.disabled = !n;
                dateValue = new Date(dateValue.getTime()+n*perDeviation);
                date.textContent = dateValue.toLocaleDateString();
            }
    </script>
</body>
</html>